<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">标题徽章</h5>
				<p>徽章（Badges）主要用于突出显示新的或未读的项。</p>
			</div>
			<div class="card-body">
				<h1>测试标题
					<span class="badge badge-secondary">New</span>
				</h1>
				<h2>测试标题
					<span class="badge badge-secondary">New</span>
				</h2>
				<h3>测试标题
					<span class="badge badge-secondary">New</span>
				</h3>
				<h4>测试标题
					<span class="badge badge-secondary">New</span>
				</h4>
				<h5>测试标题
					<span class="badge badge-secondary">New</span>
				</h5>
				<h6>测试标题
					<span class="badge badge-secondary">New</span>
				</h6>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">各种颜色类型的徽章</h5>
			</div>
			<div class="card-body">
				<span class="badge badge-primary">主要</span>
				<span class="badge badge-secondary">次要</span>
				<span class="badge badge-success">成功</span>
				<span class="badge badge-danger">危险</span>
				<span class="badge badge-warning">警告</span>
				<span class="badge badge-info">信息</span>
				<span class="badge badge-light">浅色</span>
				<span class="badge badge-dark">深色</span>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">药丸形状徽章</h5>
			</div>
			<div class="card-body">
				<span class="badge badge-pill badge-default">默认</span>
				<span class="badge badge-pill badge-primary">主要</span>
				<span class="badge badge-pill badge-success">成功</span>
				<span class="badge badge-pill badge-info">信息</span>
				<span class="badge badge-pill badge-warning">警告</span>
				<span class="badge badge-pill badge-danger">危险</span>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">嵌入到按钮内徽章</h5>
			</div>
			<div class="card-body">
				<button type="button" class="btn btn-primary">
					Messages
					<span class="badge badge-light">4</span>
				</button>
				<button type="button" class="btn btn-danger">
					Notifications
					<span class="badge badge-light">7</span>
				</button>
			</div>
		</div>
	</section>
</body>

</html>